<template>
  <view class="container">
    <view class="pay-container">
      <view class="pay-header">
        <text class="pay-title">微信支付</text>
      </view>
      
      <view class="pay-content">
        <view v-if="loading" class="loading">
          <text>正在处理支付...</text>
        </view>
        
        <view v-else-if="payStatus === 'success'" class="pay-success">
          <text class="success-text">支付成功！</text>
          <button class="back-btn" @click="goBack">返回</button>
        </view>
        
        <view v-else-if="payStatus === 'fail'" class="pay-fail">
          <text class="fail-text">支付失败，请重试</text>
          <button class="retry-btn" @click="retryPay">重试</button>
          <button class="back-btn" @click="goBack">返回</button>
        </view>
        
        <view v-else class="pay-ready">
          <text class="ready-text">准备支付</text>
          <button class="pay-btn" @click="startPay">立即支付</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

interface PayParams {
  timestamp: string;
  nonceStr: string;
  package: string;
  signType: string;
  paySign: string;
}

const loading = ref(false);
const payStatus = ref(''); // 'success', 'fail', ''
const payParams = ref<PayParams>({
  timestamp: '',
  nonceStr: '',
  package: '',
  signType: '',
  paySign: ''
});

onLoad((option: any) => {
  console.log('接收到支付参数:', option);
  
  // 解析公众号传递的支付参数
  if (option.timestamp) {
    payParams.value = {
      timestamp: option.timestamp,
      nonceStr: option.nonceStr,
      package: decodeURIComponent(option.package || ''),
      signType: option.signType,
      paySign: option.paySign
    };
    
    // 自动开始支付
    startPay();
  }
});

// 开始支付
const startPay = async () => {
  if (!payParams.value.timestamp) {
    uni.showToast({
      title: '支付参数不完整',
      icon: 'none'
    });
    return;
  }
  
  loading.value = true;
  
  try {
    // 调用微信小程序支付接口
    const result = await uni.requestPayment({
      timeStamp: payParams.value.timestamp,
      nonceStr: payParams.value.nonceStr,
      package: payParams.value.package,
      signType: payParams.value.signType,
      paySign: payParams.value.paySign
    });
    
    console.log('支付成功:', result);
    payStatus.value = 'success';
    
    uni.showToast({
      title: '支付成功',
      icon: 'success'
    });
    
    // 支付成功后跳转到cart3页面，并清空页面栈
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/mall/index/cart3'
      });
    }, 1500);
    
    // 可以在这里调用支付成功后的回调接口
    // await notifyPaySuccess();
    
  } catch (error) {
    console.error('支付失败:', error);
    payStatus.value = 'fail';
    
    uni.showToast({
      title: '支付失败',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 重试支付
const retryPay = () => {
  payStatus.value = '';
  startPay();
};

// 返回上一页
const goBack = () => {
  // 如果是从公众号跳转过来的，可以跳转回公众号
  if (getCurrentPages().length === 1) {
    // 只有一个页面，说明是从外部跳转过来的
    uni.navigateBack({
      fail: () => {
        // 如果返回失败，可以尝试跳转到首页
        uni.switchTab({
          url: '/pages/dog/index'
        });
      }
    });
  } else {
    uni.navigateBack();
  }
};

// 支付成功后的回调处理（可选）
const notifyPaySuccess = async () => {
  // 这里可以调用后端接口通知支付成功
  // const res = await api.notifyPaySuccess(payParams.value);
  // return res;
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
}

.pay-container {
  width: 100%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.pay-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.pay-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.pay-content {
  text-align: center;
}

.loading {
  padding: 40rpx 0;
}

.loading text {
  font-size: 32rpx;
  color: #666;
}

.pay-success {
  padding: 40rpx 0;
}

.success-text {
  font-size: 32rpx;
  color: #07c160;
  margin-bottom: 40rpx;
  display: block;
}

.pay-fail {
  padding: 40rpx 0;
}

.fail-text {
  font-size: 32rpx;
  color: #fa5151;
  margin-bottom: 40rpx;
  display: block;
}

.pay-ready {
  padding: 40rpx 0;
}

.ready-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 40rpx;
  display: block;
}

.pay-btn {
  background-color: #07c160;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx 40rpx;
  font-size: 32rpx;
  width: 100%;
  margin-bottom: 20rpx;
}

.retry-btn {
  background-color: #576b95;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx 40rpx;
  font-size: 32rpx;
  width: 100%;
  margin-bottom: 20rpx;
}

.back-btn {
  background-color: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx 40rpx;
  font-size: 32rpx;
  width: 100%;
}
</style> 